import React,{Component} from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col,Container,CardImg,CardBody,CardSubtitle,Form,FormGroup, Input,FormText,Media} from 'reactstrap';
import classnames from 'classnames';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
 class MyCollect extends Component{
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.state = {
          activeTab: '1'
        };
      }

      toggle(tab) {
        if (this.state.activeTab !== tab) {
          this.setState({
            activeTab: tab
          });
        }
      }
render(){
   return(
    <Container styleName="mycollect">
        {/*tab选项卡*/}
        <Nav tabs>
        <NavItem>
          <NavLink
            className={classnames({ active: this.state.activeTab === '1' })}
            onClick={() => { this.toggle('1'); }}>
            全部
          </NavLink>
        </NavItem>

        <NavItem>
          <NavLink
            className={classnames({ active: this.state.activeTab === '2' })}
            onClick={() => { this.toggle('2'); }}>
            同演员
          </NavLink>
        </NavItem>

        <NavItem>
          <NavLink
            className={classnames({ active: this.state.activeTab === '3' })}
            onClick={() => { this.toggle('3'); }}>
            同类型
          </NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={this.state.activeTab}>
        <TabPane tabId="1">
        <Row styleName="all">
            <Col sm="2">
                <Card styleName="card">
                <CardImg top width="100%" src="../../images/hmy.jpg"/>
                <CardTitle styleName="cardtitle">鸿门宴</CardTitle>

            </Card>
            </Col>
            <Col sm="2">
                <Card styleName="card">
                <CardImg top width="100%" src="../../images/hmy.jpg"/>

                <CardTitle styleName="cardtitle">鸿门宴</CardTitle>

            </Card>
            </Col>
            <Col sm="2">
                <Card styleName="card">
                <CardImg top width="100%" src="../../images/hmy.jpg"/>

                <CardTitle styleName="cardtitle">鸿门宴</CardTitle>

            </Card>
            </Col>
        </Row>
        </TabPane>
        <TabPane tabId="2">
            <Row>
              <Col sm="12">
                <h4>Tab 2 Contents</h4>
              </Col>
            </Row>
          </TabPane>
        <TabPane tabId="3">
            <Row>
              <Col sm="12">
                <h4>Tab 3 Contents</h4>
              </Col>
            </Row>
          </TabPane>
      </TabContent>
      {/*看过的人也爱看*/}
      <div>
        <h3 styleName="aikan">看过的人也爱看</h3>
        <hr/>
      </div>
      <Row styleName="all">
            <Col sm="2">
                <Card styleName="card">
                <CardImg top width="100%" src="../../images/hmy.jpg"/>
                <CardTitle styleName="cardtitle">鸿门宴</CardTitle>

            </Card>
            </Col>
            <Col sm="2">
                <Card styleName="card">
                <CardImg top width="100%" src="../../images/hmy.jpg"/>

                <CardTitle styleName="cardtitle">鸿门宴</CardTitle>

            </Card>
            </Col>
            <Col sm="2">
                <Card styleName="card">
                <CardImg top width="100%" src="../../images/hmy.jpg"/>

                <CardTitle styleName="cardtitle">鸿门宴</CardTitle>

            </Card>
            </Col>
        </Row>
        {/*输入评论*/}
        <Form>
            <FormGroup>
            <Input type="textarea" name="text" id="comment" placeholder="请在这里输入评论"/>
            </FormGroup>
            <div styleName="fabu">
                <span>还可以输<span>300</span>个字（不少于8个字）</span>
                <Button>发布</Button>
            </div>
        </Form>
        {/*评论*/}
        <Nav tabs>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              全部评论
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '2' })}
              onClick={() => { this.toggle('2'); }}
            >
              热门评论
            </NavLink>
          </NavItem>
        </Nav>
        <TabContent activeTab={this.state.activeTab}>
          <TabPane tabId="1">
            <Media styleName="commentList">
            <Media left href="#">
                <img styleName="user-touxiang" src="../../images/touxiang.jpg"/>
            </Media>
            <Media body styleName="mediaBody">
              <Media styleName="mediaTop">
                <div styleName="user-id">
                pp用户_405
                </div>
                <div styleName="juBao">
                    <i>
                    </i>
                    <span>举报</span>
                </div>
              </Media>
              <Media styleName="user-comment">
              <p>
              差不多
              </p>
              </Media>
              <Media styleName="mediaBtm">
                <div>
                    08-24 20:50:18
                </div>
                <div styleName="pingjia">
                    <i>
                        <img src="../../images/good.png"/>
                    </i>
                    <span styleName="zan">(<span>4</span>)
                    </span>
                    <span styleName="huifu">回复</span>
                    <span>(<span>0</span>)</span>
                </div>
              </Media>
            </Media>
          </Media>

          </TabPane>
          <TabPane tabId="2">
            <Row>
              2222
            </Row>
          </TabPane>
        </TabContent>
       </Container>
        )
    }
}
export default CSSModules(MyCollect, styles, { allowMultiple: true });